<!doctype html>
<html lang="zh-CN">
<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap 的 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  <style>
    .content {
      width: 100%;
      height: auto;
      word-wrap:break-word;
      word-break:break-all;
      overflow: hidden;

    }

  </style>
  <title>TodoWork!</title>
</head>
<body>
<div class="container-fluid">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="mainpage.html">题单</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="mainpage.html">题单<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Submit.html">提交题目</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Submit.html">英语四级听力练习(计划开发)</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="AboutMe.html">我的发布</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Score.html">我的成绩</a>
        </li>
      </ul>
    </div>
  </nav>





<div id="state">
  <h1 style="margin-left: 20px" class="title">马克思主义期末题库</h1>
  <hr>
  <p class="introduce">这是一个20界的马克思主义期末测试题库顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
    +1
  </p>
  <button type="button" class="btn btn-primary random">随机练习</button>
  <button type="button" class="btn btn-success normal">顺序练习</button>
  <button type="button" class="btn btn-danger special">错题库</button>
</div>


</div>



<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script>
  var title = $.cookie('title')
  var code = $.cookie('code')
  var introduce = $.cookie('introduce')
  var type = 0;
  var account = $.cookie('account')
  $(".title").html(title)
  $(".introduce").html(introduce)
  var questionDetail;
  var currentPage = -1;
  var countPage = 0;
  var correct = 0;
  var error = 0;
  var errorList = [];
  var special = false;
  var correctList = [];
  $(".normal").on("click",function () {
    special = false;
      getData("normal")

  })
  $(".random").on("click",function () {
    special = false;
      getData("random")

  })
  $(".special").on("click",function () {
    special = true;
    getData("special")

  })
  function getData(pattern) {
    //得到具体题目
    $.ajax({
      type: 'post',
      url: '/GetQuestionDetail',
      data:{
        'code':code,
        'pattern':pattern,
        'email':account
      },
      traditional: true,
      async: false,
      dataType: 'json',
      success: function(data) {
        questionDetail = data;
        if(questionDetail.length === 0 && special === true){
          alert("你还没有错题！")
          return false;
        }

        nextQuestion();
      },
      error: function(data) { //失败的事件
          alert("获取数据失败，请联系管理员");

      }
    })

  }
  //画单选题
  function DrawnDetail1(){
    $("#state").empty();
    var str = "  <div style=\"margin-left: 30px;margin-top: 30px\" width=\"90%\">\n" +
            "<div class='count'>"+countPage+"/"+questionDetail.length+"</div>\n" +
            "    <p3><span style='color: #0f6674'>【单选题】</span>"+ questionDetail[currentPage].Question +"</p3>\n" +
            "    <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px\"><input type=\"radio\" class=\"choice A\" name=\"choice\" ><text class=\"content\">A: "+ questionDetail[currentPage].A +"</text></div> <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px\"><input type=\"radio\" class=\"choice B\" name=\"choice\" ><text class=\"content\">B: "+ questionDetail[currentPage].B +"</text></div> <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px\"><input type=\"radio\" class=\"choice C\" name=\"choice\" ><text class=\"content\">C: "+ questionDetail[currentPage].C +"</text></div> <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px\"><input type=\"radio\" class=\"choice D\" name=\"choice\" ><text class=\"content\">D: "+ questionDetail[currentPage].D +"</text></div> <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px;float: right\"><input type=\"button\" class=\"next btn-primary btn\" value=\"next\"></div>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px;float: left\"><input type=\"button\" class=\"prep btn-primary btn\" value=\"prep\"></div> \n" +
            "  </div>\n"
    $("#state").append(str);
  }
  //画多选题
  function DrawnDetail2(){
    $("#state").empty();
    var str = "  <div style=\"margin-left: 30px;margin-top: 30px\" width=\"90%\">\n" +
            "<div class='count'>"+countPage+"/"+questionDetail.length+"</div>\n" +
            "    <p3><span style='color: #0f6674'>【多选题】</span>"+ questionDetail[currentPage].Question +"</p3>\n" +
            "    <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px\"><input type=\"checkbox\" class=\"check A\" name=\"choice\" ><text class=\"content\">A: "+ questionDetail[currentPage].A +"</text></div> <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px\"><input type=\"checkbox\" class=\"check B\" name=\"choice\" ><text class=\"content\">B: "+ questionDetail[currentPage].B +"</text></div> <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px\"><input type=\"checkbox\" class=\"check C\" name=\"choice\" ><text class=\"content\">C: "+ questionDetail[currentPage].C +"</text></div> <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px\"><input type=\"checkbox\" class=\"check D\" name=\"choice\" ><text class=\"content\">D: "+ questionDetail[currentPage].D +"</text></div> <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px;float: right\"><input type=\"button\" class=\"next btn-primary btn\" value=\"next\"></div> \n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px;float: left\"><input type=\"button\" class=\"prep btn-primary btn\" value=\"prep\"></div> <br>\n" +
            "  </div>\n"
    $("#state").append(str);
  }
  //简答题
  function DrawnDetail3(){
    $("#state").empty();
    var str = "  <div style=\"margin-left: 30px;margin-top: 30px\" width=\"90%\">\n" +
            "<div class='count'>"+countPage+"/"+questionDetail.length+"</div>\n" +
            "    <p3><span style='color: #0f6674'>【简答题】</span>"+ questionDetail[currentPage].Question +"</p3>\n" +
            "    <br>\n" +
            "  <textarea style=\"width: 100%\" name=\"\" id=\"text\" cols=\"100\" rows=\"10\"></textarea>" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px;float: right;margin-left: 10px\"><input type=\"button\" class=\"next btn-primary btn\" value=\"next\"></div> <br>\n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px;float: right\"><input type=\"button\" class=\"check1 btn-success btn\" value=\"check\"></div> \n" +
            "    <div class=\"Qblock\" style=\"margin-top: 10px;float: left\"><input type=\"button\" class=\"prep btn-primary btn\" value=\"prep\"></div> <br>\n" +
            "  </div>\n"
    $("#state").append(str);
  }
  //填空题
  function DrawnDetail4(){
      $("#state").empty();
      var ans = "ans:<input type=\"text\" class=\"form-control ans\"> <br> \n";
      var ans1 = "";
      var rights = questionDetail[currentPage].right.split(";")
      for (let i = 0; i < rights.length ; i++) {
          ans1 += ans;
      }
      var str = "  <div style=\"margin-left: 30px;margin-top: 30px\" width=\"90%\">\n" +
          "<div class='count'>"+countPage+"/"+questionDetail.length+"</div>\n" +
          "    <p3><span style='color: #0f6674'>【填空题】</span>"+ questionDetail[currentPage].Question +"</p3>\n" +
          "    <br>\n" +
          ans1 + "\n" +
          "    <div class=\"Qblock\" style=\"margin-top: 10px;float: right;margin-left: 10px\"><input type=\"button\" class=\"next btn-primary btn\" value=\"next\"></div> \n" +
          "    <div class=\"Qblock\" style=\"margin-top: 10px;float: right;margin-left: 10px\"><input type=\"button\" class=\"check2 btn-success btn\" value=\"check\"></div> \n" +
              "    <div class=\"Qblock\" style=\"margin-top: 10px;float: left\"><input type=\"button\" class=\"prep btn-primary btn\" value=\"prep\"></div> <br>\n" +
          "  </div>\n"
      $("#state").append(str);
  }
  //判断多选题答案是否正确
  var count = 0;
  $("#state").on("click",".check",function () {
    var rights = questionDetail[currentPage].right.split(",");
    var flag = false;
    var count2 = count;
    for (let i = 0; i < rights.length; i++) {
      let hasClass = $(this).hasClass(rights[i]);
      if(hasClass) {
        count++;
        break;
      }
    }
    if(count2 === count){
      sendMessage("错误","正确答案为"+rights,"danger");
      errorList.push(questionDetail[currentPage]);
    }
    if(count === rights.length){
      sendMessage("正确","正确答案为"+rights,"success");
      correct++;
      correctList.push(questionDetail[currentPage].Question)
      nextQuestion()

    }
  });
  //判断单选题答案是否正确
  $("#state").on("click",".choice",function () {
    let hasClass = $(this).hasClass(questionDetail[currentPage].right);
    if(hasClass){
      sendMessage("正确","正确答案为"+questionDetail[currentPage].right,"success");
      correct++;
      correctList.push(questionDetail[currentPage].Question)
      nextQuestion()
    }else{
      sendMessage("错误","正确答案为"+questionDetail[currentPage].right,"danger");
      errorList.push(questionDetail[currentPage]);
    }
  });
  //下一题的按钮
  $("#state").on("click",".next",function () {
      nextQuestion()
  });
  //上一题的按钮
  $("#state").on("click",".prep",function () {
    prepQuestion();
  });
  //简答题确认按钮
  $("#state").on("click",".check1",function () {
    sendMessage("警告请自行判断，意思相近即可;","答案:"+questionDetail[currentPage].right,"warning")
    error++;
  });
  //填空题确认
  $("#state").on("click",".check2",function () {
      var total = questionDetail[currentPage].right.split(";");
      var totalLen = total.length;
      var i = 0;
      var flag = true
      $(".ans").each(function () {
          var ans = $(this).val();
          if(total[i] !== ans){
              sendMessage("错误","正确答案: " + total,"danger");
              flag = false;
              errorList.push(questionDetail[currentPage]);
              return false;
          }
          i++;
      })
    if(flag){
      sendMessage("正确","正确答案: " + total,"success");
      correct++;
      correctList.push(questionDetail[currentPage].Question)
    }

  });
  //下一页函数
  function nextQuestion() {
    count = 0;
    countPage++;
    currentPage++;
    if(questionDetail.length > currentPage){
        switch (questionDetail[currentPage].type) {
          case 1:
            DrawnDetail1();
            break;
          case 2:
            DrawnDetail2();
            break;
          case 3:
            DrawnDetail3();
            break;
          case 4:
              DrawnDetail4();
            break;
          default:
            break;

        }
    }
    else{
      if(special === false) {
        calculateScore()
        if (errorList.length > 0) {
          sendErrorBook()
        }
      }else{
         $("#state").empty();
        sendMessage("警告","最后一题啦！","danger")
         if(correctList.length != 0){
           deleteCorrectQuestion();
         }
      }
    }
  }

  function deleteCorrectQuestion() {
    $.ajax({
      type: 'post',
      url: '/DeleteErrorQuestion',
      data:{
        'code':code,
        'data':JSON.stringify(correctList),
        'email':account
      },
      traditional: true,
      async: false,
      dataType: 'json',
      success: function(data) {
        sendMessage("成功","记录成功","success");
      },
      error: function(data) { //失败的事件
        sendMessage("失败","记录成失败","danger");
      }
    })
  }
  //上一页函数
  function prepQuestion() {
    count = 0;
    countPage--;
    currentPage--;
    if(questionDetail.length >= 0){
      switch (questionDetail[currentPage].type) {
        case 1:
          DrawnDetail1();
          break;
        case 2:
          DrawnDetail2();
          break;
        case 3:
          DrawnDetail3();
          break;
        case 4:
          DrawnDetail4();
          break;
        default:
          break;

      }
    }
    else
      sendMessage("警告","到顶啦","warning");
  }
  //计算分数
  function calculateScore() {
    var score = ((100/(questionDetail.length-error))*correct);
    $.ajax({
      type: 'post',
      url: '/calculateScore',
      data:{
        'code':code,
        'email': account
      },
      traditional: true,
      async: false,
      dataType: 'json',
      success: function(data) {
        var str = "";
        if(data === -1){
          str = "    <div class=\"jumbotron\">\n" +
                  "        <h1 class=\"display-4\">成绩出来了</h1>\n" +
                  "        <p class=\"lead\">本次成绩及供参考，具体请以发布人为准</p>\n" +
                  "        <hr class=\"my-4\">\n" +
                  "        <p>这是你的第一次测验，得分为 : "+score+"</p>\n" +
                  "        <a class=\"btn btn-primary btn-lg\" href=\"Score.html\" role=\"button\">查看更多</a>\n" +
                  "    </div>"
        }else{
          var compare = "<p>你的成绩相对上次的分数 : "+data+"有进步, 本次分数: "+score+"</p>\n";
          if(data > score)
            compare = "        <p>你的成绩 : "+score+"</p>\n"
          str = "    <div class=\"jumbotron\">\n" +
                  "        <h1 class=\"display-4\">成绩出来了</h1>\n" +
                  "        <p class=\"lead\">本次成绩及供参考，具体请以发布人为准</p>\n" +
                  "        <hr class=\"my-4\">\n" +
                  compare +
                  "        <a class=\"btn btn-primary btn-lg\" href=\"Score.html\" role=\"button\">查看更多</a>\n" +
                  "    </div>"
        }
        $("#state").empty();
        $("#state").append(str);
        $.ajax({
          type: 'post',
          url: '/SaveScore',
          data:{
            'code':code,
            'email':account,
            'score':score
          },
          traditional: true,
          async: false,
          dataType: 'json',
          success: function(data) {
            console.log("成功");
          },
          error: function(data) { //失败的事件
            alert("获取数据失败，请联系管理员");
          }
        })
      },
      error: function(data) { //失败的事件
        alert("获取数据失败，请联系管理员");
      }
    })
  }
  function sendMessage(tile,inner,state){
     // $("#state").empty();
    var str = "<div style='margin-top: 50px' class=\"alert alert-"+state+" alert-dismissible rowmargin fade show\">" +
            "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" +
            "<strong>"+tile+"</strong> "+inner+"!" +
            "</div>";
    $("#state").append(str);
  }

  function sendErrorBook() {
    $.ajax({
      type: 'post',
      url: '/SavaErrorList',
      data:{
        'code':code,
        'data':JSON.stringify(errorList),
        'email':account
      },
      traditional: true,
      async: false,
      dataType: 'json',
      success: function(data) {
        alert("存储成功")
      },
      error: function(data) { //失败的事件
        alert("本次错题存储失败");
      }
    })
  }
</script>

</body>
</html>